<script setup>
import { ref, reactive, onMounted } from "vue";
import axios from "../../../utils/request";
import {ElNotification,ElMessageBox} from 'element-plus'
 

import {userStore} from '../../../stores/user'
 
const stores =userStore();

//const item = reactive({});
const tableData = ref()//ref(Array(5).fill(item));
//表格的查询的表单数据
const formInline = reactive({
  userName: "",
  roleId: "",
});

//网页加载前触发的函数  mounted
onMounted(() => {
  getUserList();
});
const mytitle=ref('新增')
const dialogFormVisible =ref(false)
const formLabelWidth=ref('80px');//表单宽度

const form=ref({
  usrId: 123,
  usrName: "小黑黑",
  usrRoleId: "1",
})
//查询事件
function onSubmit() { 
  getUserList();
}

//获取用户列表
//user/elelist 
function getUserList() {
  // axios({
  //   method: "post",
  //   url: "test/user/list",
  //   data: formInline,
  // })
  axios.get('test/user/list',{ 
                               params:{userName: formInline.userName,roleId: formInline.roleId,}
                               ,headers:{token:stores.token}
                            })  
    .then((response) => {
      let { code, msg, data } = response.data;
      //绑定数据至表格
      if (200 === code) {
        console.log(data)
        tableData.value = data;
      }else{
        console.log(msg)
      }
    })
    .catch((err) => {
      console.log(err);
    });
}
//编辑按钮的事件
function edit(row,type) {
  dialogFormVisible.value = true

  console.log('type: '+ type)
  mytitle.value=type
  if(type==='add'){ 
    form.value={}
  }else{ 
    form.value={...row}
  } 
}

//删除
function del(row){
  ElMessageBox.confirm('此操作将删除'+row.uid, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    ElNotification({
          title: '操作提示',
          message: '删除成功',
          type: 'success',
          position:"bottom-right",
          duration:1000,
        })
  })
}

//请求后台执行修改
function doUpdate(){
  dialogFormVisible.value = false

  //console.log('doUpdate:   '+mytitle.value)
   
  axios.post('user/'+mytitle.value,form.value)
  .then(response=>{
    let { code, msg, data } = response.data;
    console.log(data);
      //绑定数据至表格
      if (200 === code) {
        ElNotification({
          title: '操作提示',
          message: msg,
          type: 'error',
          position:"bottom-right",
          duration:1000,
        })
        getUserList()//刷新表格数据
      }

  })
  .catch(err=>console.log(err));
}

</script>

<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input
          v-model="formInline.userName"
          placeholder="请输入用户名"
        ></el-input>
      </el-form-item>

      <el-form-item label="角色">
        <el-select v-model="formInline.roleId" placeholder="请选择">
          <el-option label="超级管理员" value="1"></el-option>
          <el-option label="普通用户" value="2"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item>
    </el-form>

    <el-row>
      <el-button type="warning" @click="stores.inc()">{{stores.num}}</el-button>
      <el-button type="primary" @click="edit(null,'add')">新增 token:  {{stores.token}} | {{stores.username}}</el-button>
    </el-row>

    <el-table
      :data="tableData"
      style="width: 100%" 
      border 
      highlight-current-row
    >
      <el-table-column prop="usrId" label="id" width="180" />
      <el-table-column prop="usrName" label="用户名" width="180" />
      <el-table-column prop="usrRoleId" label="角色id" />

      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            type="primary"
            size="small"
            @click="edit(scope.row,'update');"
            >编辑</el-button
          >
          <el-button
            size="small"
            type="danger"
            @click="del(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 新增|编辑对话框 -->
    <el-dialog v-model="dialogFormVisible" :title="mytitle==='add'?'新增':'编辑'">
      <el-form :model="form">
        <el-form-item label="UID" :label-width="formLabelWidth">
          <el-input v-model="form.uid"/>
        </el-form-item>
        <el-form-item label="用户名" :label-width="formLabelWidth">
          <el-input v-model="form.userName"/>
        </el-form-item>
        <el-form-item label="地址" :label-width="formLabelWidth">
          <el-input v-model="form.address"  />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="doUpdate">
            确认
          </el-button>
          <el-button @click="dialogFormVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>